<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>点餐</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
     <!-- 核心 tabs 文件 -->
    <link rel="stylesheet" href="css/tabs.css" type="text/css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/Dialog.js"></script>
    <script src="js/tabs.js"></script>
    <script src="shoppad-jsp/food.js"></script>
</head>
<body>
    <script>var LODOP = getLodop(); </script>
    <div class="index">
         <div class="index-top">
            外婆家1号
        </div>
   
        <div class="index-center">
            <div class="row">
                <div class="col-sm-2">
                    <div class="index-nav">
                        <div id="spancur" style="display: none;"></div>
                        <p id="lastuser" class="lastuser">员工编号：10001</p>
                        <input id="loginexit" type="button"  value="切换用户" >
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home">
                        <a href="index.html" class="active">首页</a>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home">
                        <a href="#">设置打印机</a>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home">
                        <a href="#">修改密码</a>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home nav-pad">
                        <a href="#"><span>1</span>切换PAD</a>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home">
                        <a href="#">退出登录</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="diet-info clearfix">
            <div class="diet-info-left">
                <div class="choice-people ">
                    <div class="cp-title clearfix">
                        <div class="left">
                            桌号: ${table.tableNO} <input type="hidden" id="hidtableid"
                                value="${table.tableID}" />
                        </div>
                        <div class="right">
                            人数：<b id="cpr"><i id="spanpeoplenum">2</i>人</b><span
                                id="spanchangenum">修改</span>
                        </div>
                    </div>
                    <ul class="cp-num clearfix" id="divpeoplenum"
                        style="display: none;">
                        <li>1人</li>
                        <li>2人</li>
                        <li>3人</li>
                        <li>4人</li>
                        <li>5人</li>
                        <li>6人</li>
                        <li>7人</li>
                        <li>8人</li>
                        <li>9人</li>
                        <li>10人</li>
                        <li>11人</li>
                        <li>12人</li>
                        <li>13人</li>
                        <li>14人</li>
                        <li>15人</li>
                        <li>16人</li>
                        <li>17人</li>
                        <li>18人</li>
                        <li>19人</li>
                        <li>20人</li>
                    </ul>

                </div>

        
                <div class="ddieta">
                    <ul class="ddieta-top clearfix">
                        <li style="width: 100px">菜名</li>
                        <li style="width: 60px">价格(元)</li>
                        <li style="width: 80px">数量</li>
                        <li style="width: 80px">总价(元)</li>
                    </ul>
                    <div id="divlistdish"></div>
                </div>

                <div class="" id="myOrder" style="">
                    <div style="" class="" id="cartarea"></div>
                    <div class="f-fix">
                        <div class="order_title">
                            <div class="clearfix foot_orderList">
                                <div class="left">
                                    <b>数量：</b><span style="font-size: 16px;" class="num totalnum"
                                        id="num">0</span>
                                </div>
                                <div class="right">
                                    <b>总计：</b> ¥ <span class="price totalprice" id="price_txt">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="oder_submit">
                            <button class="dw2" id="submitOrder" onclick="newfood()">
                                <a>点菜</a>
                            </button>
                            <button class="dw2" id="submitOrder1" onclick="changesta1T0()">
                                <a>取消</a>
                            </button>
                            <button id="clearOder" class="button button-rounded button-flat"
                                onclick="empty()">
                                <a>清空</a>
                            </button>
                        </div>
                    </div>

                </div>

            </div>
            <div class="diet-info-right diet-jiansuo">
                <div class="tabs">
                    <div class="tabs-header">
                        <div class="border"></div>
                        <ul class="clearfix">
                            <li class="active"><a href="#tab-1" tab-id="1"
                                ripple="ripple" ripple-color="#FFF">菜品检索</a></li>
                            <li><a href="#tab-2" tab-id="2" ripple="ripple"
                                ripple-color="#FFF">拼音检索</a></li>
                        </ul>
                    </div>
                    <div class="tabs-content">
                        <div tab-id="1" class="tab active clearfix" id="tabs1">
                            <div class="left" id="J_menuList">
                                <ul>
                                    <li class="active" data_name="所有分类" onclick="showdish(this,0)"><a
                                        data_name="所有分类">所有分类</a></li>
                                    <c:forEach items="${dishtypes}" var="item">
                                        <li class="" data_name="${item.typeName}"
                                            onclick="showdish(this,${item.id})"><a
                                            data_name="${item.typeName}">${item.typeName}</a></li>
                                    </c:forEach>
                                </ul>
                            </div>
                            <div class="right">
                                <!-- 选项卡相对应的内容 -->
                                <div class="" id="J_list_Container">

                                    <div id="divlistalldish" class="row diet-all clearfix">

                                      
                                    
                                                <div class="diet-list">
                                                    <input type="hidden" class="dishtypeid"
                                                        value="${item.typeID}" />
                                                    <div class="diet-list-name" data-target="#12"
                                                        data-toggle="modal">
                                                        <div class="ellipsis">${item.dishName}</div>
                                                        <div class="diet-list-price">¥${item.price} /份</div>
                                                    </div>
                                                </div>
                                                <div class="modal fade zuocai-tanchukuang in"
                                                    id="12" tabindex="-1" role="dialog"
                                                    aria-labelledby="mySmallModalLabel" aria-hidden="false">
                                                    <div class="modal-dialog modal-sm">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h4 class="modal-title" id="myModalLabel">选择方式</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                
                                                                <div class="zuocai clearfix">
                                                                    <div class="left ">1</div>
                                                                    <div class="right ">
                                                                        <input type="radio" name="radio" checked
                                                                            value="1"><label
                                                                            for="radio1"></label>
                                                                    </div>
                                                                </div>
                                                                <div class="zuocai clearfix">
                                                                    <div class="left ">2</div>
                                                                    <div class="right ">
                                                                        <input type="radio" name="radio" 
                                                                            value="1"><label
                                                                            for="radio1"></label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                  
                                                            <div class="modal-footer">
                                                                <input type="submit" data-dismiss="modal" value="取消">
                                                                <input type="submit" id="queren" value="确认"
                                                                    data-dismiss="modal"
                                                                    onclick="methoddish(${item.id},'${item.dishName}',${item.discountPrice},'${item.unit}','${item.printIndex}')">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                 <div class="diet-list">
                                                    <input type="hidden" class="dishtypeid"
                                                        value="${item.typeID}" />
                                                    <div class="diet-list-name" data-target="#12"
                                                        data-toggle="modal">
                                                        <div class="ellipsis">${item.dishName}</div>
                                                        <div class="diet-list-price">¥${item.price} /份</div>
                                                    </div>
                                                </div>
                                                <div class="modal fade zuocai-tanchukuang in"
                                                    id="12" tabindex="-1" role="dialog"
                                                    aria-labelledby="mySmallModalLabel" aria-hidden="false">
                                                    <div class="modal-dialog modal-sm">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h4 class="modal-title" id="myModalLabel">选择方式</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                
                                                                <div class="zuocai clearfix">
                                                                    <div class="left ">1</div>
                                                                    <div class="right ">
                                                                        <input type="radio" name="radio3" checked
                                                                            value="1"><label
                                                                            for="radio1"></label>
                                                                    </div>
                                                                </div>
                                                                <div class="zuocai clearfix">
                                                                    <div class="left ">2</div>
                                                                    <div class="right ">
                                                                        <input type="radio" name="radio3" 
                                                                            value="1"><label
                                                                            for="radio1"></label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                  
                                                            <div class="modal-footer">
                                                                <input type="submit" data-dismiss="modal" value="取消">
                                                                <input type="submit" id="queren" value="确认"
                                                                    data-dismiss="modal"
                                                                    onclick="methoddish(${item.id},'${item.dishName}',${item.discountPrice},'${item.unit}','${item.printIndex}')">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                  

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div tab-id="2" class="tab" id="tabs2">
                            <!-- 选项卡相对应的内容 -->
                            <div class="" id="">
                                <form action="" method="post">
                                    <input type="text" name="diet-mingzi" id="diet-mingzi"
                                        placeholder="输入菜名简拼" oninput="queryPinyin()">
                                    <!-- <input type="submit" value="查询" id="diet-select"> -->
                                </form>
                               
                            </div>
                             <div class="diet-list">
                                                    <input type="hidden" class="dishtypeid"
                                                        value="${item.typeID}" />
                                                    <div class="diet-list-name" data-target="#12"
                                                        data-toggle="modal">
                                                        <div class="ellipsis">${item.dishName}</div>
                                                        <div class="diet-list-price">¥${item.price} /份</div>
                                                    </div>
                                                </div>
                                                <div class="modal fade zuocai-tanchukuang "
                                                    id="12" tabindex="-1" role="dialog"
                                                    aria-labelledby="mySmallModalLabel" aria-hidden="false">
                                                    <div class="modal-dialog modal-sm">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h4 class="modal-title" id="myModalLabel">选择方式</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                
                                                                <div class="zuocai clearfix">
                                                                    <div class="left ">1</div>
                                                                    <div class="right ">
                                                                        <input type="radio" name="radio1" checked
                                                                            value="1"><label
                                                                            for="radio1"></label>
                                                                    </div>
                                                                </div>
                                                                 <div class="zuocai clearfix">
                                                                    <div class="left ">1</div>
                                                                    <div class="right ">
                                                                        <input type="radio" name="radio1" 
                                                                            value="1"><label
                                                                            for="radio1"></label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                  
                                                            <div class="modal-footer">
                                                                <input type="submit" data-dismiss="modal" value="取消">
                                                                <input type="submit" id="queren" value="确认"
                                                                    data-dismiss="modal"
                                                                    onclick="methoddish(${item.id},'${item.dishName}',${item.discountPrice},'${item.unit}','${item.printIndex}')">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>



    <div style="display: none;" class="cookprintlist">
        <div class="listprint">
            <span title="0" class="printname">GP-58120 Series</span> <span
                class="dishids"> </span> <span class="printhtml"></span>
        </div>
        <div class="listprint">
            <span title="0" class="printname">GP-58130 Series</span> <span
                class="dishids"> <s>83</s> <s>89</s> <s>90</s> <s>91</s> <s>92</s>
                <s>93</s> <s>94</s> <s>198</s>
            </span> <span class="printhtml"></span>
        </div>
    </div>



    <input type="hidden" id="hidprinttype" value="1" />
    <input type="hidden" id="hidrestname" value="${restName}" />
    <input type="hidden" id="hidtableno" value="${table.tableNO}" />
    <input type="hidden" id="hidorderid" value="${orderMaster.orderID}" />
    <input type="hidden" id="hidcreatetime"
        value="${orderMaster.CreateTime}" />
    <input type="hidden" id="hidprintindex" value="${printer.printIndex}" />

    <script type="text/javascript">
        function methoddish(n,t,i,r,p){
            var data = $('input:radio:checked').val();
            if(typeof(data)=="undefined"){
                alert("请选择口味");
                return;
            }else{
                var arr = data.split('-');
                var mId = arr[0], mName=arr[1];
                var f=!1,u;
                ($("#divlistdish ul").each(function(){
                    var r=$(this).find(".hiddishid");
                    var h=$(this).find(".hidmethodid");
                    u=parseInt($(r).val(),10),i;
                    if(u==n&&mId==$(h).val())
                        return i=$(this).find(".addone"),
                        addnum(i),
                        f=!0,!1}),f)
                        ||
                        (u="<ul class=\"ddieta-center clearfix\"><li style=\"width: 100px\" class=\"cai-select\"><div class=\'dishname ellipsis\'>"+t+"<p>("+mName+")</p>"+"</div></li><li style=\"width: 60px\"><span class='dishprice'>"+i+"</span>/<span class='dishunit'>"+r+"</span></li>",
                        u+="<li style=\"width: 80px\"><input type='hidden' class='hiddishid' value='"+n+"' />",
                        u+="<input type='hidden' class='hidmethodid' value='"+mId+"' />",
                        u+="<input type='hidden' class='nocounter fl hideprintindex' value='"+p+"' />",
                        u+="<div class='btn_wrap btnp counter'><button class='list_minus plusone counter_minus fl'  onclick='plusnum(this)' style='display: inline-block;' data_id='1' ontouchstart=''>",
                        u+="<strong></strong></button>",
                        u+="<i class='nocounter fl dishnum' style='display: inline-block;'>1</i>",
                        u+="<button class='list_add counter_plus addone' onclick='addnum(this)' data_id='1' ontouchstart=''><strong></strong></button>",
                        u+="<em class='fixBig  fake'></em></div></li><li class='dishtotalprice' style=\"width: 80px\">"+i.toFixed(2)+"</li></ul>",$("#divlistdish").append(u),caltotal()) 
            }
        }
    </script>
    <script>
        $(document).ready(function () {
        var activePos = $('.tabs-header .active').position();
        function changePos() {
            activePos = $('.tabs-header .active').position();
            $('.border').stop().css({
                left: activePos.left,
                width: $('.tabs-header .active').width()
            });
        }
        changePos();
        var tabHeight = $('.tab.active').height();
        function animateTabHeight() {
            tabHeight = $('.tab.active').height();
    
        }
        animateTabHeight();
        function changeTab() {
            var getTabId = $('.tabs-header .active a').attr('tab-id');
            $('.tab').stop().fadeOut(300, function () {
                $(this).removeClass('active');
            }).hide();
            $('.tab[tab-id=' + getTabId + ']').stop().fadeIn(300, function () {
                $(this).addClass('active');
                animateTabHeight();
            });
        }
        $('.tabs-header a').on('click', function (e) {
            e.preventDefault();
            var tabId = $(this).attr('tab-id');
            $('.tabs-header a').stop().parent().removeClass('active');
            $(this).stop().parent().addClass('active');
            changePos();
            tabCurrentItem = tabItems.filter('.active');
            $('.tab').stop().fadeOut(300, function () {
                $(this).removeClass('active');
            }).hide();
            $('.tab[tab-id="' + tabId + '"]').stop().fadeIn(300, function () {
                $(this).addClass('active');
                animateTabHeight();
            });
        });
        var tabItems = $('.tabs-header ul li');
        var tabCurrentItem = tabItems.filter('.active');

        $('[ripple]').on('click', function (e) {
            var rippleDiv = $('<div class="ripple" />'), rippleOffset = $(this).offset(), rippleY = e.pageY - rippleOffset.top, rippleX = e.pageX - rippleOffset.left, ripple = $('.ripple');
            rippleDiv.css({
                top: rippleY - ripple.height() / 2,
                left: rippleX - ripple.width() / 2,
                background: $(this).attr('ripple-color')
            }).appendTo($(this));
            window.setTimeout(function () {
                rippleDiv.remove();
            }, 1500);
        });
    });
        
        
        //根据拼音查询
        function queryPinyin(){
            //alert("queryPinyin");
            var formParam = {
                    pinyin : $("#diet-mingzi").val(),
                };
                //alert("id : " + $("#h_vip_card_id").val() + " discount_condition ： " + $("#discount_condition").val() + " " + $("#discount_preferential").val());
                $.ajax({
                      type: 'post',
                      url: '/System/food/queryDish',
                      data: formParam,
                      cache: false,
                      dataType: 'json',
                      success: function (data){
                            //alert("data : " + JSON.stringify(data));
                          if(data.success == true){
                              //alert("data : " + JSON.stringify(data.data));
                              var html = "";
                                var list = data.data;
                                for(var i=0; i<list.length; i++) { 
                                    //${item.id},'${item.dishName}',${item.discountPrice},'${item.unit}','${item.printIndex}
                                     html += 
                                         "<div class=\"diet-list\"  onclick=\"adddish("+ list[i].id+",'"  + list[i].dishName+ "',"+ list[i].discountPrice +",'" + list[i].unit+ "','" + list[i].printIndex+ "')\">" + 
                                            "<input type=\"hidden\" class=\"dishtypeid\" value=\"" + list[i].type_id + "\" />" +
                                            "<div class=\"diet-list-name\">" +
                                            "<div class=\"ellipsis\">" + list[i].dishName + "</div>" + 
                                            "<div class=\"diet-list-price\">" + list[i].price + " /份</div>" +
                                             "</div>" +
                                           "</div>";
                                }
                             //alert(JSON.stringify(list[0]));
                                var element = document.getElementById("divlistalldishpinyin");
                                element.innerHTML = html;
                              
                              
                          } else {
                              WinAlert(data.message);
                          }
                      },
                      error: function () {
                          WinAlert("系统异常或者长时间未操作，请关闭系统重新登录");
                      }
                  });
        }
    </script>
</body>
</html>

